<template>
  <div class="app-container content-center">
    <el-row>
      <el-col :offset="8" :span="8">
        <div>
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="temp"
            label-position="left"
            auto-complete="on"
            label-width="100px"
            style="width: 400px; margin-left: 50px"
          >
            <el-form-item label="原密码" prop="oldpwd">
              <el-input
                type="password"
                placeholder="请输入原密码"
                v-model="temp.oldpwd"
              />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="temp.pwd"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="re_pwd">
              <el-input
                type="password"
                placeholder="请输入确认密码"
                v-model="temp.re_pwd"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
import { reset_pwd } from "@/api/right";
export default {
  name: "resetPassword",
  data() {
    const validateuser_pwd = (rule, value, callback) => {
      if (value.length > 30) {
        callback(new Error("密码不能太长！"));
      } else {
        callback();
      }
    };
    const validateuser_repwd = (rule, value, callback) => {
      if (value !== this.temp.pwd) {
        callback(new Error("确认密码与新密码不一致"));
      } else {
        callback();
      }
    };

    return {
      username: "",
      temp: {
        id: 0,
        oldpwd:"",
        pwd: "",
        re_pwd: "",
      },
      rules: {
        oldpwd: [
          { required: true, message: "请填写原密码", trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validateuser_pwd },
        ],
        re_pwd: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validateuser_repwd },
        ],
      },
    };
  },
  computed: {
    user_id() {
      return this.$store.getters.userid;
    },
  },
  created() {},
  mounted() {
    console.log("mounted", this.user_id);
    this.temp.id = this.user_id || 0;
    this.temp.pwd = "";
    this.temp.re_pwd = "";
    this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
    this.$refs["dataForm"] && this.$refs["dataForm"].resetFields();
  },
  methods: {
    cancel() {
      // 调用全局挂载的方法,关闭当前标签页
      this.$store.dispatch("delView", this.$route);
      // 返回上一步路由，返回上一个标签页
      this.$router.go(-1);
    },
    logout() {
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const param = {
            id: this.temp.id,
            old_password:this.temp.oldpwd,
            password: this.temp.pwd,
          };
          reset_pwd(param).then((response) => {
            if (response.data > 0) {
              this.cancel();
              setTimeout(() => {
                this.$message({
                  type: "success",
                  message: "密码修改成功!",
                });
                this.logout();
              }, 200);
            } else {
              this.$message({
                type: "info",
                message: "密码修改失败,查看原密码有没有输错！",
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.content-center {
  margin: auto;
  padding: auto;
  padding-top: 150px;
}
</style>